import axios from "axios";
import React,{useState,useEffect} from "react";

import PopularityItem from "./PopularityItem";
import style from './index.module.css'

import { Ivegetable } from "../SpecialOffer";

const {popularity,content} = style


export default function Popularity(){

    const [popularityVegetable,setPopularityVegetable] = useState<Ivegetable[]>()

    useEffect(() => {
        axios.get('/api/vegetableClassification?type=人气&limit=4')
            .then(res=>{
                const result = res.data as Ivegetable[]
                setPopularityVegetable(result)
            })
            .catch(error=>console.log(error))
        
    }, [])

    return (
        <div className={popularity}>
            <p>
                <span>人气优选</span>
                <span></span>
            </p>
            <ul className={content}>
                {
                    popularityVegetable?.map(item=>{
                        return (
                            <PopularityItem {...item} key={item._id}/>
                        )
                    })
                }
            </ul>
        </div>
    )
}